<template>
  <div>
    <Card>
      <span slot="title">商品列表</span>
      <div slot="content">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <img :src="imgBaseUrl+props.row.imgUrl" alt="">
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.ctime }}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ props.row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" width="120">
          </el-table-column>
          <el-table-column label="所属分类" prop="category" width="120">
          </el-table-column>
          <el-table-column label="商品价格" prop="price" width="120">
          </el-table-column>
          <el-table-column prop="imgUrl" label="商品图片" width="180">
            <!--插入图片链接的代码-->
            <template slot-scope="scope">
              <img :src="imgBaseUrl+scope.row.imgUrl" style="width: 80px;height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 弹框 -->
        <el-dialog title="商品编辑" :visible.sync="isshow">
          <el-form :model="amendgoods" label-width="100px">
            <el-form-item label="商品名称">
              <el-input v-model="amendgoods.name" autocomplete="off" class="ipt-text"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-select v-model="amendgoods.category" placeholder="请选择商品分类">
                <el-option v-for="(item,index) in categories" :key="index" :label="item.cateName" :value="item.cateName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input-number v-model="amendgoods.price" :precision="2" :step="0.1" :max="500"></el-input-number>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/goods/goods_img_upload" :show-file-list=" false" :on-success="handleAvatarSuccess">
                <img v-if="amendgoods.imgUrl" :src="imgBaseUrl + amendgoods.imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品描述">
              <el-input type="textarea" v-model="amendgoods.goodsDesc"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="ok" size="medium">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  getList_api,
  delGoods_api,
  categories_api,
  editGoods_api,
} from "@/api/goods.js";
import moment from "moment";
export default {
  components: {
    Card,
  },
  data() {
    return {
      tableData: [],
      amendgoods: {},
      currentPage: 1,
      pageSize: 5,
      total: 0,
      imgBaseUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/",
      isshow: false,
      categories: [],
    };
  },
  methods: {
    handleEdit(index, row) {
      this.isshow = true;
      this.amendgoods = { ...row }; //浅拷贝
    },
    //图片上传成功的钩子函数
    handleAvatarSuccess(res, file) {
      this.amendgoods.imgUrl = res.imgUrl;
    },
    //点击修改商品
    async ok() {
      let { name, category, price, imgUrl, goodsDesc, id } = this.amendgoods;
      let res = await editGoods_api({
        name,
        category,
        price,
        imgUrl,
        goodsDesc,
        id,
      });
      if (res.data.code === 0) {
        this.isshow = false;
        this.getList();
      }
    },

    //删除商品
    handleDelete(index, row) {
      this.$confirm("是否要永远删除该商品？不可逆哦！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await delGoods_api({ id: row.id });
        this.getList();
      });
    },
    //每页多少条发生变化时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //当前页发生变化时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //获取商品列表
    async getList() {
      let res = await getList_api({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      res.data.data.forEach((item) => {
        item.ctime = moment(item.ctime).format("YYYY-MM-DD HH:mm:ss");
      });
      this.total = res.data.total;
      this.tableData = res.data.data;
    },
    //获取所有分类名称
    async getCategories() {
      let res = await categories_api();
      this.categories = res.data.categories;
    },
  },
  created() {
    this.getList();
    this.getCategories();
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/deep/.el-card__body {
  padding-top: 10px;
}
/deep/.el-table__cell {
  .el-form {
    padding-left: 50px;
  }
}

/deep/.el-form-item__content {
  img {
    width: 50px;
    height: 50px;
  }
}
/deep/.el-pagination {
  margin: 20px 0;
}
/deep/.el-dialog__body {
  padding: 15px 0 5px;
  .ipt-text {
    width: 300px;
  }
  .el-textarea__inner {
    width: 300px;
  }
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader {
    height: 120px;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
</style>